<!--
 * @Author: rxn 1003312535@qq.com
 * @Date: 2024-07-05 15:25:53
 * @LastEditors: rxn 1003312535@qq.com
 * @LastEditTime: 2024-08-08 10:36:05
 * @FilePath: \vue3-progect\src\views\example\three\geometry\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--生成曲线几何体-->
<template>
	<div id="three_container"></div>
</template>

<script setup>
import * as THREE from "three";
import { onMounted } from "vue";
//-
import { CreateTHREE } from "../js/CreateThree.js";
// 引入CSS2渲染器CSS2DRenderer和CSS2模型对象CSS2DObject
import {
	CSS2DRenderer,
	CSS2DObject
} from "three/addons/renderers/CSS2DRenderer.js";
onMounted(() => {
	let container = document.getElementById("three_container");
	let obj = new CreateTHREE(container);
	// dome(obj);
	dome1(obj);
});
function dome(obj) {
	const geometry = new THREE.BoxGeometry(20, 20, 20);
	const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
	const mesh = new THREE.Mesh(geometry, material);
	obj.scene.add(mesh);
}
function dome1(obj) {
	const css2dObject = new CSS2DObject();
	const divEl = document.createElement("div");
	divEl.textContent = "测试定位";
	divEl.style.color = "#ffffff";
	const tag = new CSS2DObject(divEl);
	tag.position.set(0, 50, 30);
	obj.scene.add(tag);
}
</script>

<style lang="less" scoped>
#three_container {
	height: 100%;
}
.downLoadBtn {
	position: absolute;
	right: 0;
	top: 10px;
	z-index: 99;
}
</style>
